<template>
  <div class="root">
    
    <div class="main">
      <p class="desc1">OCR识别，轻松实现图片转文本</p>
      <p class="desc2">
        识别图片的文字信息，支持扫描文件、电子文档、书籍、票据和表单等多种场景的文字识别
      </p>
    </div>
    <div class="ocr_content">
      <div class="ocr_text">
        <img src="./assets/icon_text.png" alt="" />
        <p>通用文本识别</p>
        <span>通用文字</span>
        <span>通用表格</span>
        <span>只能分类</span>
        <img src="./assets/icon_next.png" alt="" />
      </div>
      <div class="ocr_other">
        <img src="./assets/icon_bill.png" alt="" />
        <p>通用票据识别</p>
        <span>营业执照</span>
        <span>机打发票</span>
        <span>增值税发票</span>
        <img src="./assets/icon_next.png" alt="" />
      </div>
      <div class="ocr_other">
        <img src="./assets/icon_id_card.png" alt="" />
        <p>通用证件识别</p>
        <span>身份证</span>
        <span>港澳通行证</span>
        <span>台湾通行证</span>
        <span>护照</span>
        <img src="./assets/icon_next.png" alt="" />
      </div>
      <div class="ocr_other">
        <img src="./assets/icon_custom.png" alt="" />
        <p>自定义识别</p>
        <span>手写体</span>
        <span>出生医学证</span>
        <span>印章</span>
        <span>二维码</span>
        <img src="./assets/icon_next.png" alt="" />
      </div>
    </div>
    <div class="ad">
      <p>全球用户的共同选择，累计下载超过7亿次</p>
      <p>
        门诊每天的手写病历和处方，使用OCR很容易的数字化并存储在手机和平板上。还支持搜索图片内容，病人和病例轻松匹配！
      </p>
    </div>
    <div class="foot">
      <p>用户协议 ｜ 隐私政策 ｜ 加入我们</p>
      <p>
        北京xxx科技有限公司，成立于2021年，专注于人工智能，在光学字符识别图像处理
        等领域深耕多年，拥有多项自主知识产品。
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppCopy",
  methods: {
    goHome() {
      console.log("tiao");
      // 保留当前页，页面跳转至 /home 页
      this.$router.push("/home");
    },
  },
  mounted() {
    console.log("appCopy");
  },
};
</script>

<style scoped>
.active {
  color: #0039ff;
}
.unActive {
  color: #3d3d3d;
}
.root {
  background-color: #f0f6fe;
  height: 100vh;
}
.header {
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-bottom: #d0d4e4 solid 1px;
  font-family: HelveticaNeue;
  font-weight: normal;
  letter-spacing: 0.02px;
  background-color: #fff;
}
.header > img {
  margin-left: 100px;
}

.headerTab > span {
  font-size: 18px;

  margin-left: 56px;
  color: rgba(0, 12, 53, 0.7);
}
.headerTab > span:first-child {
  margin-left: 0;
}
.logo {
  position: absolute;
  left: 5%;
  height: 56px;
  display: flex;
  align-items: center;
}
.logo > img {
  /* img_logo */
  width: 48px;
  height: 48px;
}
.ocr {
  /* OCR智能识别 */
  font-size: 18px;
  color: #3d3d3d;
}
.top {
  background-image: url("./assets/background.png");
  width: 100%;
  height: 644px;
  background-size: 100% 100%;
}
.top p {
  /* 专注智能文字 识别！ */

  position: absolute;
  left: 108px;
  top: 207.33px;
  width: 500px;
  height: 176px;
  opacity: 1;
  font-family: Inter-Medium;
  font-size: 72px;
  font-weight: 500;
  line-height: 88px;
  letter-spacing: 0px;
  color: #ffffff;
}

.desc {
  /* 通用文字识别 / 通用表格识别 / 智能识别 */

  position: absolute;
  left: 108px;
  top: 405.33px;
  width: 540px;
  height: 36px;
  opacity: 0.7;
  font-family: Inter-Regular;
  font-size: 24px;
  font-weight: normal;
  line-height: 36px;
  letter-spacing: 0px;
  color: #ffffff;
}
.try {
  /* 矩形 98 */

  position: absolute;
  left: 108px;
  top: 473px;
  width: 160px;
  height: 64px;
  border-radius: 8px;
  opacity: 1;
  background: #f2994a;
  font-family: Inter-Regular;
  font-size: 24px;
  font-weight: normal;
  line-height: 64px;
  letter-spacing: 0px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}
/* Demo展示 */
.show {
  position: absolute;
  left: 307px;
  top: 473px;
  width: 115px;
  height: 36px;
  opacity: 1;
  font-family: Inter-Regular;
  font-size: 24px;
  font-weight: normal;
  line-height: 64px;
  letter-spacing: 0px;
  color: #ffffff;
}
p {
  margin: 0;
}

.main {
  background: #ffffff;
}
/* OCR识别，轻松实现图片转文本 */
.desc1 {
  padding-top: 64.33px;
  text-align: center;
  opacity: 1;
  font-family: Inter-Medium;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 0px;
  color: rgba(0, 12, 53, 0.7);
}
.desc2 {
  margin-top: 16px;
  text-align: center;
  /* 识别图片的文字信息，支持扫描文件、电子文档、书籍、票据和表单等多种场景的文字识别 */

  opacity: 1;
  font-family: Inter-Regular;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: rgba(0, 12, 53, 0.7);
}
.ocr_content {
  display: flex;
  padding-bottom: 49.67px;
  /* text-align: center; */
}
.ocr_content div {
  width: 230px;
  height: 280px;
  border-radius: 8px;
  opacity: 1;
  background: #ffffff;
  border: 1px solid #c3c6d4;
  margin-top: 87px;
  /* text-align: center; */
}
.ocr_text {
  margin-left: 164px;
}
.ocr_other {
  margin-left: 84px;
}
.ocr_content div img:nth-of-type(1) {
  display: block;
  width: 96px;
  height: 96px;
  margin-left: 67px;
  margin-top: -48px;
}

.ocr_content div img:nth-of-type(2) {
  display: block;
  width: 19.59px;
  height: 13.16px;
  margin-left: 105px;
  margin-top: 33.42px;
}
.ocr_content div p {
  margin-top: 32px;
  /*  通用文本识别 */
  opacity: 1;
  font-family: HelveticaNeue;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0em;
  color: #000c35;
  text-align: center;
}
.ocr_content div span {
  display: inline-block;
  /* width: 80px;
  height: 32px; */
  border-radius: 4px;
  opacity: 1;
  box-sizing: border-box;
  border: 1px solid #c3c6d4;

  font-family: HelveticaNeue;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: rgba(0, 12, 53, 0.4);
  padding: 4px 10px;
}
.ocr_content div > span:nth-child(odd) {
  margin-left: 29px;
}
.ocr_content div > span:nth-child(even) {
  margin-left: 12px;
}
.ocr_content div > span:nth-of-type(1) {
  margin-top: 24px;
}
.ocr_content div > span:nth-of-type(2) {
  margin-top: 24px;
}
.ocr_content div > span:nth-of-type(n + 3) {
  margin-top: 8px;
}
.ad {
  background: url("./assets/ad.png");
  width: 100%;
  height: 480px;
  background-size: 100% 100%;
  text-align: center;
  background-color: #f6f6f6;
}
.ad p:nth-child(1) {
  /* 全球用户的共同选择，累计下载超过7亿次 */

  height: 10%;
  opacity: 1;
  font-family: Inter-Medium;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 0px;
  color: rgba(0, 12, 53, 0.7);
  padding-top: 78px;
}
.ad p:nth-child(2) {
  /* 全球用户的共同选择，累计下载超过7亿次 */

  /* 门诊每天的手写病历和处方，使用OCR很容易的数字化并存储在手机和平板上。还支持搜索图片内容，病人和病例轻松匹配！ */

  width: 563px;
  height: 40px;
  opacity: 1;
  font-family: Inter-Regular;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0px;
  color: rgba(0, 12, 53, 0.7);
  margin: auto;
  margin-top: 212px;
}
.foot {
  width: 100%;
  height: 214px;
  /* 矩形 104 */
  opacity: 1;
  background: #ffffff;
  text-align: center;
}
.foot p:nth-child(1) {
  /* 用户协议 ｜ 隐私政策 ｜ 加入我们 */

  height: 20px;
  opacity: 1;
  font-family: Inter-Regular;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0px;
  color: rgba(0, 12, 53, 0.7);
  margin-top: 48px;
}
.foot p:nth-child(2) {
  /* 北京xxx科技有限公司，成立于2021年，专注于人工智能，在光学字符识别图像处理 等领域深耕多年，拥有多项自主知识产品。 */

  width: 563px;
  height: 40px;
  opacity: 1;
  font-family: Inter-Regular;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0px;
  color: rgba(0, 12, 53, 0.7);
  margin: auto;
  margin-top: 47px;
}
</style>
